<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单验证</title>
	<style>
		#box{border: 1px solid #999;box-shadow: 0 0 2px #666;width: 500px;padding: 20px;margin: 100px auto;}
		#test2{text-align: center;}
		#top{background: yellow;color: #000;}
	</style>
</head>
<body>
	<div id="box">
		<p>注意*为必填项</p>
		<input type="text" id="top">
		<p>账户详细信息</p>
		<table>
			<tr>
				<td>用户名称</td>
				<td>*<input type="text" id="userName"></td>
			</tr>
			<tr>
				<td>登录密码</td>
				<td>*<input type="text" id="passWord1"></td>
			</tr>
			<tr>
				<td>重复登录密码</td>
				<td>*<input type="text" id="passWord2"></td>
			</tr>
		</table>
		<p>个人信息资料</p>
		<table>
			<tr>
				<td>电子邮件</td>
				<td>*<input type="text" id="mail"></td>
			</tr>
			<tr>
				<td>真实姓名</td>
				<td>*<input type="text" id="realname"></td>
			</tr>
			<tr>
				<td>中奖通知手机</td>
				<td>*<input type="text" id="mobile"></td>
			</tr>
			<tr>
				<td>验证码</td>
				<td>*<input type="text" id="test1"></td>
				<td><input type="text" id="test2"></td>
			</tr>
		</table>
		<button id="btn">提交</button>
		<input type="checkbox" id="check">10天免登陆
	</div>
</body>
</html>
<script src="cookie.js"></script>
<script src="pool.js"></script>
<script>
window.onload = function(){
	var top = document.getElementById("top");
	var userName = document.getElementById("userName");
	var ps1 = document.getElementById("passWord1");
	var ps2 = document.getElementById("passWord2");
	var mail  =document.getElementById("mail");
	var realname = document.getElementById("realname");
	var mobile = document.getElementById("mobile");
	var test1 = document.getElementById("test1");
	var test2 = document.getElementById("test2");
	var btn = document.getElementById("btn");
	var check = document.getElementById("check");
	userName.onblur = function(){
		if (!/^[a-zA-Z]{6,20}$/.test(userName.value)) {
			top.value = "请输入6-20位英文字母";
		}else{
			top.value = "";
		}
	}
	ps1.onblur = function(){
		if (ps1.value.length<3) {
			top.value = "密码太短";
		}else{
			top.value = "";
		}
	}
	ps2.onblur = function(){
		if (ps1.value!=ps2.value) {
			top.value = "两次密码不一致";
		}else{
			top.value = "";
		}
	}
	mail.onblur = function(){
		if (!/^\w+@\w+(.com|.cn)$/.test(mail.value)) {
			top.value = "请正确输入邮箱";
		}else{
			top.value = "";
		}
	}
	mobile.onblur = function(){
		if (!/^1\d{10}$/.test(mobile.value)) {
			top.value = "请正确输入手机号";
		}else{
			top.value = "";
		}
	}
	test1.onblur = function(){
		if (test1.value!=test2.value) {
			top.value = "验证码不正确";
		}else{
			top.value = "";
		}
	}


	var num = parseInt(Math.random()*10000);
	var str1 = ""+num;
	var len1 = str1.length;
	switch (len1) {
		case 1:
			str1 = "000"+str1;
			break;
		case 2:
			str1 = "00"+str1;
			break;
		
		case 3:
			str1 = "0"+str1;
			break;	
		case 4:
			str1;
			break;
	}
	test2.value = str1;
	test2.onclick = function(){
		num = parseInt(Math.random()*10000);
		str1 = ""+num;
		len1 = str1.length;
		switch (len1) {
			case 1:
				str1 = "000"+str1;
				break;
			case 2:
				str1 = "00"+str1;
				break;
			
			case 3:
				str1 = "0"+str1;
				break;	
			case 4:
				str1;
				break;
		}
		test2.value = str1;
	}


	if(getCookie("userName")){
		var us = getCookie("userName");
		var pa = getCookie("password")
		userName.value = us;
		ps1.value = pa;
		check.checked = "checked";
	}

	btn.onclick = function(){
		var userVal = userName.value;
		var passVal = ps1.value;

		if(check.checked){
			setCookie("userName",userVal,10)
			setCookie("password",passVal,10)
		}
	}
}

</script>